<template>
	<view class="nucleicAcidTesting">
		<view class="patientName">张三(5345345345345)</view>
		<view class="title">请选择预约的项目</view>
		<view class="testingType">
			<view class="typeItem" v-for="(item,index) in testingType" :key="index" @click="selectTestingType(item)">
				<view class="cover">
					<img class='image' src="../../static/QRcode.png">
				</view>
				<view class="content">
					<view class="name">{{item.name}}</view>
					<view class="money">检测金额{{item.money}}元</view>
				</view>
			</view>
		</view>
		<view class="nucleicAcidRecord" @click="nucleicAcidRecord">核酸检测记录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//核酸检测类型
				testingType:[{
					type:1,
					money:'28.00',
					name:'新冠核酸检测(自费单采)'
				},{
					type:2,
					money:'6.00',
					name:'新冠核酸检测(自费20混1)'
				}]
			}
		},
		methods: {
			//选择检测类型
			selectTestingType(item){
				uni.navigateTo({
					url:'/pages/nucleicAcidPay/nucleicAcidPay?type='+encodeURIComponent(JSON.stringify(item))
				})
			},
			//核酸检测记录
			nucleicAcidRecord(){
				uni.navigateTo({
					url:'/pages/nucleicAcidRecord/nucleicAcidRecord'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.nucleicAcidTesting{
	background-color: #fff;
	.patientName{
		display: flex;
		align-items: center;
		height: 84rpx;
		background: linear-gradient(90deg, #5088FD 0%, #62B9F9 100%);
		opacity: 0.7;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 44rpx;
		color: #FFFFFF;
		padding: 0 32rpx;
	}
	.title{
		padding: 0 32rpx;
		margin-top: 52rpx;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 40rpx;
		color: #686868;
	}
	.nucleicAcidRecord{
		position: absolute;
		bottom: 100rpx;
		left: 50%;
		transform: translate(-50%);
		font-size: 28rpx;
		line-height: 40rpx;
		color: #61B7F9;
	}
	.testingType{
		margin-top: 10rpx;
		.typeItem{
			height: 140rpx;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			border-bottom: 2px dashed #C2C2C2;
			.cover{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				.image{
					width: 100%;
					height: 100%;
				}
			}
			.content{
				margin-left: 32rpx;
				.name{
					font-size: 32rpx;
					line-height: 44rpx;
					color: #000000;
				}
				.money{
					font-size: 24rpx;
					line-height: 34rpx;
					color: #6B6B6B
				}
			}
		}
	}
}
</style>
